<template>
	<view class="fsize-30">
		<u-navbar title="商品订单详情" placeholder>
			<view class="flex align-center" slot="left">
				<u-icon name="arrow-left" size="19" @click="upProductData"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
		</u-navbar>
		<!-- 订单状态 -->
		<view class="flex justify-between align-center padding-20 bg-white">
			<text>订单号: {{details.orderId}}</text>
			<text class="line-red fweigh-600">{{
				details.status===1 && details.payStatus === 1?'待支付':
				details.status===1 && details.payStatus >= 2 && details.shipStatus === 1?'待发货':
				details.status===1 && details.payStatus >= 2 && details.shipStatus === 2?'部分发货':
				details.status===1 && details.payStatus >= 2 && details.shipStatus >= 3 && details.confirmStatus === 1 ?'已发货':
				details.status===1 && details.payStatus >= 2 && details.shipStatus >= 3 && details.confirmStatus >= 2 && details.isComment === false?'待评价':
				details.status===1 && details.payStatus >= 2 && details.shipStatus >= 3 && details.confirmStatus >= 2 && details.isComment === true?'已评价':
				details.status ===2 ? '已完成':
				details.status ===3 ? '已取消':''
			}}</text>
		</view>
		<!-- 商品信息 -->
		<view class="info-plate mt-20">
			<view class="pt-20 bg-white">
				<view class="flex pb-20 pl-20 pr-20" v-for="(item, index) in details.items" :key="index">
					<image class="width-120 height-120 border-radius-10 shrink0" :src="item.imageUrl"></image>
					<view class="ml-20 w-100 flex flex--row justify-between">
						<view class="">
							<view class="fsize-30 text-ellipsis width-586">{{item.name}}</view>
							<view class="line-gray fsize-22 mt-4">{{item.sn}}</view>
						</view>
						<view class="">
							<text class="text-red">￥{{item.price}}</text>
							<text class="fsize-22 ml-10 line-gray">x {{item.nums}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 价格 -->
		<view class="padding-20 fsize-28 line-gray">价格</view>
		<view class="bg-white fsize-30">
			<view class="flex justify-between padding-20 border-b">
				<text class="">订单金额</text>
				<text class="line-red">￥{{details.orderAmount}}</text>
			</view>
			<view class="flex justify-between padding-20 border-b">
				<text class="">实付金额</text>
				<text class="line-red">￥{{details.orderAmount}}</text>
			</view>
			<view class="flex justify-between padding-20 border-b">
				<text class="">发货状态</text>
				<text class="line-gray">{{details.shipStatusText}}</text>
			</view>
			<view class="flex justify-between padding-20 border-b">
				<text class="">消费门店</text>
				<text class="line-gray">{{details.store.storeName}}</text>
			</view>
			<view class="flex justify-between padding-20 border-b">
				<text class="">支付方式</text>
				<text class="line-gray">{{details.paymentItem[0].paymentCodeName || ''}}</text>
			</view>
		</view>
		<!-- 时间 -->
		<view class="padding-20 fsize-28 line-gray">时间</view>
		<view class="bg-white fsize-30">
			<view class="flex justify-between padding-20 border-b">
				<text class="">下单时间</text>
				<text class="line-gray">{{details.createTime}}</text>
			</view>
			<view class="flex justify-between padding-20 border-b">
				<text class="">支付时间</text>
				<text class="line-gray">{{details.paymentItem[0].createTime}}</text>
			</view>
			<view class="flex justify-between padding-20 border-b" v-if="derails.shipStatusText==='已发货'">
				<text class="">发货时间</text>
				<text class="line-gray">2023-03-24 21::25:19</text>
			</view>
		</view>
		<!-- 物流信息 -->
		<view v-if="derails.shipStatusText==='已发货'">
			<view class="padding-20 fsize-28 line-gray">物流信息</view>
			<view class="bg-white fsize-30">
				<view class="flex justify-between padding-20 border-b">
					<text class="">物流单号</text>
					<text class="line-gray">12345481981619</text>
				</view>
			</view>
		</view>
		
		<!-- 下单用户信息 -->
		<view class="padding-20 fsize-28 line-gray">下单用户信息</view>
		<view class="bg-white fsize-30">
			<view class="flex justify-between padding-20 border-b">
				<text class="">用户ID</text>
				<text class="line-gray">{{details.user.id}}</text>
			</view>
			<view class="flex justify-between padding-20 border-b">
				<text class="">用户名</text>
				<text class="line-gray">{{details.user.nickName}}</text>
			</view>
			<view class="flex justify-between padding-20 border-b">
				<text class="">联系方式</text>
				<text class="line-gray">{{details.user.mobile}}</text>
			</view>
			<view class="flex flex--row padding-20">
				<text class="">留言</text>
				<text class="line-gray fsize-26 mt-10">无订单留言</text>
			</view>
		</view>
		<view class="bottom-button flex justify-end pt-10" v-if="lisIx && details.status ===1 && details.payStatus === 1">
			<view class="flex justify-end pt-20">
				<view class="ml-20">
					<u-tag text="取消订单" shape="circle" bgColor="#e54d42" borderColor="#e54d42" @click="operate(details.orderId,'cancel')"/>
				</view>
				<view class="ml-20" @click="$u.route('pages/payment/qrc', {id:details.orderId, orderType: 1})">
					<u-tag text="收款码" shape="circle" bgColor="#e54d42"  borderColor="#e54d42" />
				</view>
				<view class="ml-20">
					<u-tag text="确认收款" shape="circle" bgColor="#e54d42"  borderColor="#e54d42" @click="operate(details.orderId, 'affirm')"/>
				</view>
			</view>
		</view>
		<view class="station" :style="details.payStatus === 1?'height: 67px':''"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
				lisIx: null,
				details: {}
			}
		},
		onLoad(option) {
			this.orderId = option.id
			this.lisIx = option.index
			this.getDatails()
		},
		methods: {
			upProductData(){
				const that = this
				uni.$emit('up-prodct', {
					ix: that.lisIx,
					details: that.details
				})
				uni.navigateBack()
			},
			operate(rowid, ty){
				console.log('sd', rowid, ty)
				let that = this
				uni.showModal({
					title: '提示',
					content: ty==='affirm'?'确认该订单已收款?':'确认取消该订单?',
					success: function (res) {
						if (res.confirm) {
							if(ty === 'cancel'){
								that.$reqJsonPost('CoreCmsProductCancelOrder', { id: [rowid], orderType: 1 }).then(res=>{
									that.getDatails()
								})
							}else if (ty === 'affirm'){
								that.$reqJsonPost('CoreCmsProjectOrderPay', {
									orderId: rowid,
									type: 1,
									paymentCode: 'offline',
								}).then(res=>{
									that.getDatails()
								})
							}
						}
					}
				})
			},
			getDatails() {
				this.$reqJsonPost('CoreCmsOrderDetails', { id: this.orderId }).then(res => {
					this.details = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.station{
	padding-bottom: 0;  
	padding-bottom: constant(safe-area-inset-bottom);  
	padding-bottom: env(safe-area-inset-bottom);  
}
</style>
